<template>
  <div>
    <!-- 参数区域 -->
    <template v-if="pms.filter(m=>m.type != 'hidden').length > 0 ">
      <el-form :model="reportParam" ref="paramForm" size="small" label-position="left">
        <template v-for="item in pms.filter(m=>m.type != 'hidden')">
          <div class="el-col-6" :key="item.id">
            <el-form-item :label="item.desc" label-width="80px">
              <template v-if="item.inputType==='text'">
                <el-input v-model="reportParam[item.id]" :disabled="!showSearchBtn" placeholder="请录入"></el-input>
              </template>
              <template v-if="item.inputType==='select'">
                <el-select v-model="reportParam[item.id]" :disabled="!showSearchBtn" clearable placeholder="请选择"
                           style="width:100%">
                  <el-option v-for="item in item.options" :key="item.value" :label="item.text" :value="item.value">
                  </el-option>
                </el-select>
              </template>
              <template v-if="item.inputType==='mselect'">
                <el-select v-model="reportParam[item.id]" :disabled="!showSearchBtn" multiple clearable
                           placeholder="请选择" style="width:100%">
                  <el-option v-for="item in item.options" :key="item.value" :label="item.text" :value="item.value">
                  </el-option>
                </el-select>
              </template>
              <template v-if="item.inputType === 'dateSelect'">
                <el-date-picker v-model="reportParam[item.id]" :disabled="!showSearchBtn" :format="item.dateFormat"
                                style="width:100%" :type="item.dateType" placeholder="选择日期"
                                :value-format="item.dateFormat"></el-date-picker>
              </template>
            </el-form-item>
          </div>
        </template>
        <template v-if="showSearchBtn==true">
          <div class="col-sm-6">
            <el-button size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" type="danger" @click="cleardata">清除</el-button>
          </div>
        </template>
      </el-form>
    </template>
  </div>
</template>
<script>

import request from "@/utils/request"
import LayoutView from './LayoutView.vue'
import {Loading} from 'element-ui'
import $ from 'jquery'

export default {
  name: "portalParamView",
  components: {
    LayoutView
  },
  props: {
    pms: {
      type: Array,
      required: true,
      default: []
    },
    showSearchBtn: {
      type: Boolean,
      required: true,
      default: true
    }
  },
  data() {
    return {
      reportParam: {}
    }
  },

  methods: {
    cleardata() {
      $(this.pms).each((a, b) => {
        this.reportParam[b.id] = null;
      });
    },
    /**
     * 获取参数值
     */
    getParamValues() {
      let dt = JSON.parse(JSON.stringify(this.reportParam));
      //处理多选参数
      $(this.pms).each((a, b) => {
        if (b.inputType === 'mselect' && dt[b.id]) {
          if (dt[b.id]) {
            dt[b.id] = dt[b.id].join(",");
          } else {
            dt[b.id] = '';
          }
        }
      });
      return dt;
    },
    search() {
      let dt = this.getParamValues();
      let reportId = this.$parent.$parent.reportId;
      dt['serviceid'] = "ext.sys.tab.ajax";
      dt['t_from_id'] = "mv_" + reportId;
      dt['mvid'] = "mv_" + reportId;

      let loadingInstance = Loading.service({
        fullscreen: false,
        target: document.querySelector('.wrapper-content-nomargin')
      });
      request({
        url: "/control/extControl",
        method: "POST",
        params: dt,
      }).then(resp => {
        //重新渲染报表
        this.$parent.$parent.$refs['optarea'].setCompData(resp.rows);
      });
      loadingInstance.close();
    },
    //初始化参数字段
    initReportParam(urlParam, pms) {
      $(pms).each((a, b) => {
        if (b.type === 'checkbox' && urlParam[b.id]) {
          let v = urlParam[b.id];
          this.reportParam[b.id] = v.split(",");
        } else {
          this.reportParam[b.id] = urlParam[b.id];
        }
      });
    }
  },
  mounted() {

  },
  watch: {}
}
</script>
